<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<form name="myForm">
			<table>
				<tr>
					<td>
						<select name="job" size="10" multiple="multiple">
							<option value="歌手">歌手</option>
							<option value="演员">演员</option>
							<option value="画家">画家</option>
							<option value="教师">教师</option>
							<option value="公务员">公务员</option>
							<option value="职员">职员</option>
						</select>
					</td>
					<td>
						<input type="button" value=">>" onclick="add()" /><br />
						<input type="button" value="<<" onclick="remove()" />
					</td>
					<td>
						<select name="myjob" size="10" multiple="multiple">
						</select>
					</td>
				</tr>
			</table>
		</form>
		<script type="text/javascript">
			function add() {
				var jobLength = document.myForm.job.length;
				for(var i=jobLength-1;i>=0;i--)
				{
					if(document.myForm.job[i].selected)
					{
						var o = new Option(document.myForm.job[i].text,document.myForm.job[i].value);
						document.myForm.myjob.options[document.myForm.myjob.options.length] = o;
						document.myForm.job.remove(i);
					}
				}
			}

			function remove() {
				var jobLength = document.myForm.myjob.length;
				for(var i=jobLength-1;i>=0;i--)
				{
					if(document.myForm.myjob[i].selected)
					{
						var o = new Option(document.myForm.myjob[i].text,document.myForm.myjob[i].value);
						document.myForm.job.options[document.myForm.job.options.length] = o;
						document.myForm.myjob.remove(i);
					}
				}
			}
			
			

		</script>
	</body>
</html>